<template>
  <div class="message">
    <div class="message-header">
      <van-nav-bar
        title="消息中心"
        left-text=""
        left-arrow
        style="color: #fff; background: blue"
      >
        <template #right>
          <span>排序</span>
          <van-icon name="sort" size="18" />
        </template>
      </van-nav-bar>
    </div>

    <van-tabs v-model="active" @change="getList">
      <van-tab v-for="(item, index) in tabs" :key="index">
        <template #title>
          {{ item.title }}
          <span v-show="item.unRead" class="message-tips"></span>
        </template>
        <div class="message-main">
          <div
            class="message-main-content"
            v-for="(items, idx) in message"
            :key="idx"
            @click="toPage(items.id)"
          >
            <div
              class="left"
              :style="`backgroundImage: url(${
                items.type === 1
                  ? require('../assets/系统消息.png')
                  : require('../assets/个人信息.png')
              })`"
            >
              <!-- style="backgroundimage: url('../assets/系统消息.png')" -->
              <div v-show="items.isReader != 0" class="left-tips"></div>
            </div>
            <div class="center">
              <div class="center-top">
                <span>{{ items.title }}</span>
                <span v-show="items.top === 1" class="center-top-tips"></span>
              </div>
              <div class="center-bottom">发布人： {{ items.sourceName }}</div>
            </div>
            <div class="right">
              <span>{{ items.createTime }}</span>
              <van-icon name="arrow" />
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getNewCenter } from "@/request/api";
export default {
  data() {
    return {
      active: 0,
      tabs: [
        {
          title: "全部消息",
          unRead: true,
        },
        {
          title: "系统消息",
          unRead: false,
        },
        {
          title: "个人消息",
          unRead: false,
        },
      ],

      message: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      getNewCenter({
        current: 1,
        size: 20,
        type: this.active,
      }).then((res) => {
        if (res.errCode === 0) {
          this.message = res.data.records;
        }
      });
    },
    toPage(id) {
      this.$router.push({ path: "/messagedetail", query: { id } });
    },
  },
};
</script>

<style scoped>
.message-header {
  background: blue;
}

.message-tips {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-image: url("../assets/红点.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.message-main {
  padding-top: 10px;
  background: #efefef;
}

.message-main-content {
  display: flex;
  align-items: center;
  height: 40px;
  background-color: #fff;
  padding: 20px;
}

.message-main-content .left {
  display: flex;
  justify-content: flex-end;
  width: 40px;
  height: 40px;
  background-image: url("../assets/系统消息.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.left-tips {
  display: flex;
  width: 10px;
  height: 10px;
  background-image: url("../assets/红点.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.message-main-content .center {
  padding: 0 20px;
  flex: 1;
}

.center-top-tips {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("../assets/置顶.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-left: 10px;
}

.message-main-content .right {
  display: flex;
  align-items: center;
}

.message-main-content .right span {
  margin-right: 4px;
}
</style>